﻿@using Model.Database
@{
    Layout = null;
    UserInfo userInfo = null;

    if (ViewData["LoginUser"] != null)
    {
        userInfo = ViewData["LoginUser"] as UserInfo;
    }
    else
    {
        Response.Redirect("/Login/Index");
    }
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <!--ie模拟渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>用户中心</title>
    <link href="~/Content/Scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="~/Content/Scripts/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" />
    <link href="~/Content/Scripts/webuploader/0.1.5/webuploader.css" rel="stylesheet"/>

    <style>
         .clearfix:after{content:"\20";display:block;height:0;clear:both;visibility:hidden}.clearfix{zoom:1}
        .tabBar {border-bottom: 2px solid #333;margin:10px;margin-bottom: 5px;}
        .tabBar span {background-color: #e8e8e8;cursor: pointer;display: inline-block;float: left;font-weight: bold;height: 30px;line-height: 30px;padding: 0 15px;border-radius: 8px;}
        .tabBar span.current{background-color: #333;color: #fff;border-radius: 8px;}
        .tabCon {display: none;border:1px #ddd solid;margin: 10px;margin-top: 5px;}


        .table {
            width: 90%;
            margin: 0 auto;
            margin-top: 10px;
            margin-bottom: 10px;
            text-align: center;
        }

        .leftTd {
            width: 30%;
            font-weight: bold;
        }

        .rightTd {
            width: 70%;
            text-align: left;
        }

        textarea {
            resize: none;
        }
    </style>

    <!--引入脚本解决兼容性(hack技术，必须放入head中)-->
    <!--[if lt ie 9]>
        <script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script>
        <script src="~/Content/Scripts/html5_css3/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div id="tab_demo" class="HuiTab container-fluid">
        <div class="tabBar clearfix"><span>基本信息</span><span>头像设置</span><span>密码修改</span></div>

        <div class="tabCon ">
            <div style="width: 90%; margin: 0 auto; margin-top: 5px;">
                <a id="baseInfoEditBtn" class="btn btn-primary radius" href="javascript:;"><i class="Hui-iconfont">&#xe6df;</i> 修改信息</a>
            </div>

            <form id="form1">
                <input type="hidden" name="UserInfoId" value="@userInfo.UserInfoId"/>
                <table id="baseInfoView" class="table table-bordered table-hover table-condensed">
                    <tr>
                        <td class="leftTd">昵称</td>
                        <td class="rightTd">@userInfo.Nickname</td>
                    </tr>
                    <tr>
                        <td class="leftTd">邮箱</td>
                        <td class="rightTd">@userInfo.Email</td>
                    </tr>
                    <tr>
                        <td class="leftTd">手机号</td>
                        <td class="rightTd">@userInfo.Phone</td>
                    </tr>
                    <tr>
                        <td class="leftTd">QQ</td>
                        <td class="rightTd">@userInfo.QQ</td>
                    </tr>
                    <tr>
                        <td class="leftTd">性别</td>
                        <td class="rightTd">
                            @{
                                if (userInfo.Sex.HasValue)
                                {
                                    if (userInfo.Sex.Value)
                                    {
                                        @:男
                                    }
                                    else
                                    {
                                        @:女
                                    }
                                }
                            }
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">生日</td>
                        <td class="rightTd">
                            @if (userInfo.Birthday.HasValue)
                            {
                                @userInfo.Birthday.Value.ToString("yyyy-MM-dd")
                            }
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">年龄</td>
                        <td class="rightTd">@userInfo.Age</td>
                    </tr>
                    <tr>
                        <td class="leftTd">祖籍</td>
                        <td class="rightTd">@userInfo.Homeplace</td>
                    </tr>
                    <tr>
                        <td class="leftTd">居住地址</td>
                        <td class="rightTd">@userInfo.Address</td>
                    </tr>
                    <tr>
                        <td class="leftTd">兴趣爱好</td>
                        <td class="rightTd">@userInfo.Hobby</td>
                    </tr>
                    <tr>
                        <td class="leftTd">签名</td>
                        <td class="rightTd">@userInfo.Sign</td>
                    </tr>
                </table>
                <table id="baseInfoEdit" class="table table-bordered table-hover table-condensed" style="display: none;">
                    <tr>
                        <td class="leftTd">昵称</td>
                        <td class="rightTd">
                            <input type="text" id="nickName" name="Nickname" value="@userInfo.Nickname" class="form-control" placeholder="昵称"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">邮箱</td>
                        <td class="rightTd">
                            <input type="text" id="email" name="Email" value="@userInfo.Email" class="form-control" placeholder="邮箱"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">手机号</td>
                        <td class="rightTd">
                            <input type="text" id="phone" name="Phone" value="@userInfo.Phone" class="form-control" placeholder="手机号"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">QQ</td>
                        <td class="rightTd">
                            <input type="text" id="qq" name="QQ" value="@userInfo.QQ" class="form-control" placeholder="QQ"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">性别</td>
                        <td class="rightTd">
                            @{
                                if (userInfo.Sex.HasValue)
                                {
                                    if (userInfo.Sex.Value)
                                    {
                                        @:男 <input type="radio" name="Sex" value="true" checked="checked"/> 女<input type="radio" name="Sex" value="false"/>
                                    }
                                    else
                                    {
                                        @:男 <input type="radio" name="Sex" value="true"/> 女<input type="radio" name="Sex" value="false" checked="checked"/>
                                    }
                                }
                                else
                                {
                                    @:男 <input type="radio" name="Sex" value="true" checked="checked"/> 女<input type="radio" name="Sex" value="false"/>
                                }
                            }
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">生日</td>
                        <td class="rightTd">
                            @if (userInfo.Birthday.HasValue)
                            {
                                <input type="text" name="Birthday" onfocus="WdatePicker({ lang: 'zh-cn' })" value="@userInfo.Birthday.Value.ToString("yyyy-MM-dd")" class="input-text Wdate form-control" placeholder="生日"/>
                            }
                            else
                            {
                                <input type="text" name="Birthday" onfocus="WdatePicker({ lang: 'zh-cn' })" value="" class="input-text Wdate form-control" placeholder="生日" />
                            }
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">年龄</td>
                        <td class="rightTd">
                            <input type="text" id="age" name="Age" value="@userInfo.Age" class="form-control" placeholder="年龄"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">祖籍</td>
                        <td class="rightTd">
                            <input type="text" id="homeplace" name="Homeplace" value="@userInfo.Homeplace" class="form-control" placeholder="祖籍"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">居住地址</td>
                        <td class="rightTd">
                            <input type="text" id="address" name="Address" value="@userInfo.Address" class="form-control" placeholder="居住地址"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">兴趣爱好</td>
                        <td class="rightTd">
                            <input type="text" id="hobby" name="Hobby" value="@userInfo.Hobby" class="form-control" placeholder="兴趣爱好"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">签名</td>
                        <td class="rightTd">
                            <input type="text" id="sign" name="Sign" value="@userInfo.Sign" class="form-control" placeholder="签名"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <button id="baseInfoSubmitBtn" type="submit" class="btn btn-success" style="margin-right: 20px;">保存</button>
                            <button type="reset" class="btn btn-danger" style="margin-left: 20px;">重置</button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>

        <div class="tabCon">
            <table id="headPhoto" class="table table-bordered table-hover table-condensed">
                <tr>
                    <td class="leftTd">图片上传</td>
                    <td class="rightTd">
                        <div class="uploader-list-container">
                            <div class="queueList">
                                <div id="dndArea" class="placeholder">
                                    <div id="filePicker-2"></div>
                                    <p>或将照片拖到这里，单次最多可选300张</p>
                                </div>
                            </div>
                            <div class="statusBar" style="display: none;">
                                <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div>
                                <div class="info"></div>
                                <div class="btns">
                                    <div id="filePicker2"></div>
                                    <div class="uploadBtn">开始上传</div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

        <div class="tabCon">
            <form id="form2">
                <table class="table table-bordered table-hover table-condensed">
                    <tr>
                        <td class="leftTd">原密码</td>
                        <td class="rightTd">
                            <input type="password" class="form-control" id="oldPassword" name="OldPassword" placeholder="原密码" />
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">新密码</td>
                        <td class="rightTd">
                            <input type="password" class="form-control" id="newPassword" name="NewPassword" placeholder="新密码" />
                        </td>
                    </tr>
                    <tr>
                        <td class="leftTd">确认新密码</td>
                        <td class="rightTd">
                            <input type="password" class="form-control" id="confirmNewPassword" name="ConfirmNewPassword" placeholder="确认新密码" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <button id="editPasswordSubmitBtn" type="submit" class="btn btn-success">修改</button>
                            <button type="reset" class="btn btn-danger">重置</button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>
<script src="~/Content/Scripts/jquery-2.0.3.min.js"></script>
<script src="~/Content/Scripts/layer/2.1/layer.js"></script>
<script src="~/Content/Scripts/h-ui/js/H-ui.js"></script>
<script src="~/Content/Scripts/My97DatePicker/WdatePicker.js"></script>
<script src="~/Content/Scripts/webuploader/0.1.5/webuploader.min.js"></script>

<script src="~/Content/Scripts/TxyJs.js"></script>
<script src="~/Content/Scripts/System/Area/UserInfo/Home/Center/Center.js"></script>
<script>
    $(function () {
        coolShow();
        clickDeal();
    });

    function clickDeal() {
        var baseInfoEditBtn = $("#baseInfoEditBtn");
        var baseInfoSubmitBtn = $("#baseInfoSubmitBtn");
        var editPasswordSubmitBtn = $("#editPasswordSubmitBtn");

        baseInfoEditBtn.click(function() {
            $("#baseInfoView").css("display", "none");
            $("#baseInfoEdit").css("display", "table");
        });
        baseInfoSubmitBtn.click(function() {
            var item = this;
            if ($("#nickName").val().trim() == "") {
                layer.msg("请填写昵称", { icon: 2, time: 2000 });
                return false;
            }
            if (!txy.tools.isEmail($("#email").val().trim())) {
                layer.msg("请填写正确的邮箱", { icon: 2, time: 2000 });
                return false;
            }
            if (!txy.tools.isPhone($("#phone").val().trim())) {
                layer.msg("请填写正确的手机号333", { icon: 2, time: 2000 });
                return false;
            }
            else {
                $(item).attr("disabled", "disabled");
                $.ajax({
                    url: "/UserInfo/Home/BaseInfoEditSubmit",
                    type: "post",
                    data: $("#form1").serialize(),
                    dataType: "json",
                    success: function (data) {
                        if (data.Pass) {
                            layer.msg(data.Msg, { icon: 1, time: 2000 });
                            setTimeout(function () {
                                location.href = "/UserInfo/Home/Center";//修改成功重新载入页面
                            }, 2000);
                        }
                        else {
                            layer.msg(data.Msg, { icon: 2, time: 2000 });
                            $(item).removeAttr("disabled");
                        }
                    },
                    error: function (msg) {
                        layer.msg(msg.status, { icon: 2, time: 2000 });
                    }
                });
            }

            return false;
        });
        editPasswordSubmitBtn.click(function() {
            var item = this;

            if ($("#oldPassword").val().trim() == "") {
                layer.msg("请填写原密码", { icon: 2, time: 2000 });
                return false;
            }
            if ($("#newPassword").val().trim() == "") {
                layer.msg("请填写新密码", { icon: 2, time: 2000 });
                return false;
            }
            if ($("#confirmNewPassword").val().trim() == "") {
                layer.msg("请确认新密码", { icon: 2, time: 2000 });
                return false;
            }
            if ($("#confirmNewPassword").val().trim() != $("#newPassword").val().trim()) {
                layer.msg("请确认新密码两次输入一致", { icon: 2, time: 2000 });
                return false;
            }
            else {
                $(item).attr("disabled", "disabled");
                $.ajax({
                    url: "/UserInfo/Home/EditPasswordSubmit",
                    type: "post",
                    data: $("#form2").serialize(),
                    dataType: "json",
                    success: function (data) {
                        if (data.Pass) {
                            layer.msg(data.Msg, { icon: 1, time: 2000 });
                            setTimeout(function () {
                                location.href = "/Logout/index";//修改成功重新登录
                            }, 2000);
                        }
                        else {
                            layer.msg(data.Msg, { icon: 2, time: 2000 });
                            $(item).removeAttr("disabled");
                        }
                    },
                    error: function (msg) {
                        layer.msg(msg.status, { icon: 2, time: 2000 });
                    }
                });
            }

            return false;
        });
        $(".clearfix span").each(function() {//解决webuploader的一个bug，切换标签时，点击不到上传图片按钮
            var item = this;
            $(item).click(function() {
                uploader.refresh();
            });
        });
    }

    function coolShow() {
        $.Huitab("#tab_demo .tabBar span", "#tab_demo .tabCon", "current", "click", "0");
    }

</script>